<template>
  <view class="ui-page page-address-edit">
    <uiForm ref="baseForm" inputAlign="left" labelWidth="200rpx">
      <uiField label="收货人：" v-model="name" :rules="[{ required : true, message: '用户名格式不正确' } ]"></uiField>
      <uiField label="手机号码：" v-model="phone" :rules="[{  required : true, message: '请输入密码' } ]"></uiField>
      <uiField label="所在地区：" v-model="phone"></uiField>
      <uiField label="详细地址：" type="textarea" placeholder="阶段、小区、门牌号等" v-model="phone"></uiField>
      <uiField label="标签：" placeholder="请输入手机号码" v-model="addressTag">
        <template v-slot:input>
          <view>
            <uiTag
              v-for="tag in tags"
              :key="tag.value"
              :text="tag.label"
              :type="tag.value === addressTag ? 'primary' : ''"
              @click="handleClickTag(tag)"
              class="address-edit-tag"
              circle
            ></uiTag>
            <uiTag
              circle
              class="address-edit-tag address-edit-tag--edit"
              @click="handleClickAddTag"
            >
              <uiIcon name="ui-icon-edit" class="edit-icon"></uiIcon>点击添加
            </uiTag>
          </view>
        </template>
      </uiField>
      <uiField label="设为默认地址：" name="isDefault" inputAlign="right">
        <template v-slot:input>
          <uiSwitch v-model="isDefault"></uiSwitch>
        </template>
      </uiField>
    </uiForm>
    <uiPopup ref="popup" position="center">

      <view >
        <input class="" type="text">
      </view>
      <template #footer>

      </template>
    </uiPopup>
  </view>
</template>
<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";
import uiForm from "@/components/base/form/index.vue";
import uiField from "components/base/field/index";
import uiCheckBox from "@/components/base/checkbox/index.vue";
import uiSwitch from "@/components/base/switch/index.vue";
import uiTag from "@/components/base/tag/index.vue";
import uiIcon from "@/components/base/icon/index.vue";
import uiPopup from "@/components/base/popup/index.vue";

export default {
  name: "pageAddressEdit",
  components: {
    uiForm,
    uiField,
    uiCheckBox,
    uiSwitch,
    uiTag,
    uiIcon,
    uiPopup
  },
  data() {
    return {
      name: "",
      phone: "",
      address: "",
      provice: "",
      addressTag: "",
      isDefault: false,

      tags: [
        {
          value: 1,
          label: "家"
        },
        {
          value: 2,
          label: "公司"
        }
      ]
    };
  },
  computed: {},

  created() {},
  methods: {
    handleClickAddressSelect() {},
    handleClickTag(tag) {
      this.addressTag = tag.value;
    },
    handleClickAddTag() {
      console.log('11')
      this.$refs.popup.open();
    }
  }
};
</script>
<style lang="scss" scoped>
.page-address-edit {
  .address-container {
    &:before {
    }
  }

  .address-edit-tag + .address-edit-tag {
    margin-left: 20upx;
  }

  .address-edit-tag--edit {
    .edit-icon {
      margin-right: 8upx;
    }
  }
}
</style>
